<template>
  <div class="_wz_cent_main _wz_vehiclePortrait">
    <div class="_wz_vehiclePortrait_top">
      <Row :gutter="10" style="height: 100%;">
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title " style="color: #ed4014;display: flex;align-items: center">
                <img src="../../assets/icon_pilao.png" alt="" style="width: 44px">
              </div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{ !!alarmToday.fatigueCount?alarmToday.fatigueCount:0 }}</div>
                <div style="font-size: 12px;color: #ada2a2;">疲劳报警<span>(个)</span></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title " style="color: #ed4014;display: flex;align-items: center">
                <img src="../../assets/icon_chhaosu.png" alt="" style="width: 44px">
              </div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{ !!alarmToday.speedingCount?alarmToday.speedingCount:0 }}</div>
                <div style="font-size: 12px;color: #ada2a2;">超速报警<span>(个)</span></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title" style="color: #ed4014;"><Icon type="ios-warning" /></div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{ !!alarmToday.alarmCount?alarmToday.alarmCount:0 }}</div>
                <div style="font-size: 12px;color: #ada2a2;">今日报警<span>(个)</span></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title" style="color: #1dc1bc;font-size: 46px;"><i class="fa fa-telegram"></i></div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{!!lastPosition.vec3?lastPosition.vec3:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">总里程<span>（Km）</span></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title" style="color: #4ec7f8;"><i class="fa fa-location-arrow"></i></div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{ !!capacityAnalysis.mileageDay?parseInt(capacityAnalysis.mileageDay):0 }}</div>
                <div style="font-size: 12px;color: #ada2a2;">当日里程<span>（Km）</span></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title" style="color: #f5af47;font-size: 46px;"><i class="fa fa-calendar"></i></div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{!!capacityAnalysis.runTime?(capacityAnalysis.runTime / 60000).toFixed(2):0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">今日行驶时间<span>（分钟）</span></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title" style="color: #7b71ea;"><i class="fa fa-dashboard"></i></div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{!!lastPosition.vec1?lastPosition.vec1:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;">平均车速<span>（km）</span></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="3" style="height: 100%;">
          <Card dis-hover :bordered="true" style="height: 100%;">
            <div class="_wz_vehiclePortrait_topList">
              <div class="_wz_title" style="color: #9863df;"><i class="fa fa-truck"></i></div>
              <div class="_wz_content">
                <div style="font-size: 22px;">{{!!lastPosition.isOnline ?  '在线' : '离线'}}</div>
                <div style="font-size: 12px;color: #ada2a2;">车辆状态</div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
    <div class="_wz_vehiclePortrait_bottom">
      <Row :gutter="10" style="height: 100%;">
        <Col span="18" style="height: 100%;">
          <Row :gutter="10" style="height: calc(100% - 300px);padding: 0 0 10px;">
            <Col span="16" style="height: 100%;">
              <div class="_wz_vehiclePortrait_list _wz_vehiclePortraitDetailsc" style="height: 100%;">
                <Card dis-hover :bordered="true" style="height: 100%;">
                  <vehiclePortraitDetails :seeCarData="seeCarData" v-if="!!seeCarData.id"  @details="details"></vehiclePortraitDetails>
                </Card>
              </div>
            </Col>
            <Col span="8" style="height: 100%;">
              <div class="_wz_vehiclePortrait_list">
                <Card dis-hover :bordered="true" style="height: 100%;">
                  <p slot="title">营运里程</p>
                  <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="details('营运里程')"><Icon type="ios-search" size="18" /></span></p>
                  <div style="height: 100%;" id="operatingRange"></div>
                </Card>
              </div>
              <div class="_wz_vehiclePortrait_list">
                <Card dis-hover :bordered="true" style="height: 100%;">
                  <p slot="title">报警趋势</p>
                  <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="details('报警趋势')"><Icon type="ios-search" size="18" /></span></p>
                  <div style="height: 100%;" id="alarmingTrend"></div>
                </Card>
              </div>
            </Col>
          </Row>
          <div style="height: 300px;">
            <learning ref="Caller"  @details="details" :seeCarData="seeCarData"></learning>
          </div>
        </Col>
        <Col span="6" style="height: 100%;">
          <div class="_wz_vehiclePortrait_list" style="height: calc(100% / 3 * 1 - 19px);">
            <Card dis-hover :bordered="true" style="height: 100%;">
              <p slot="title">行驶状态</p>
              <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="details('行驶状态')"><Icon type="ios-search" size="18" /></span></p>
              <div style="height: 100%;">
                <div style="height: 100%;width: 60%;float: left;" id="_wz_speed"></div>
                <div style="float: left;width: 40%;height: 100%;padding: 10px;display: flex;flex-direction: column;justify-content: center;">
                  <div class="_wz_speed_cont">
                    行驶速度：
                    <span>{{!!lastPosition.vec1?lastPosition.vec1:0}} / {{ !!lastPosition.vec2?lastPosition.vec2:0 }}</span>
                  </div>
                  <div class="_wz_speed_cont">总里程：<span>{{!!lastPosition.vec3?(lastPosition.vec3 / 10000).toFixed(2):0}}万公里</span></div>
                  <div class="_wz_speed_cont" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;white-space: inherit;">
                    定位地址：
                    <span>{{!!lastPosition.location?lastPosition.location:'--'}}</span>
                  </div>
                </div>
                <div style="clear: both;"></div>
              </div>
            </Card>
          </div>
          <div class="_wz_vehiclePortrait_list" style="height: calc(100% / 3 * 2 + 9px);">
            <Card dis-hover :bordered="true" style="height: 100%;">
              <p slot="title">当日车辆轨迹</p>
              <p slot="extra"><span class="_wz_vehiclePortrait_details" @click="details('车辆轨迹')"><Icon type="ios-search" size="18" /></span></p>
              <div style="height: 100%;">
                <div id="_wz_vehicleMonitoring_allmap" style="width: 100%;height: 100%;"></div>
              </div>
            </Card>
          </div>
        </Col>
      </Row>
    </div>


    <Drawer :title="drawerTitle" v-model="drawerType" width="1000" :draggable="true">
      <vehicleDetails v-if="drawerType && drawerTitle == '车辆详情'" :selectData="seeCarData"></vehicleDetails>
      <annualInspection v-if="drawerType && drawerTitle == '车辆年检'" :vehicleData="seeCarData"></annualInspection>
      <insurance v-if="drawerType && drawerTitle == '车辆保险'" :vehicleData="seeCarData"></insurance>
      <maintenance v-if="drawerType && drawerTitle == '车辆维保'" :vehicleData="seeCarData"></maintenance>
      <service v-if="drawerType && drawerTitle == '车辆营运'" :vehicleData="seeCarData"></service>
      <beidouManagement v-if="drawerType && drawerTitle == '车辆北斗'" :vehicleData="seeCarData"></beidouManagement>
      <positioningTrajectory v-if="drawerType && drawerTitle == '车辆轨迹'" :vehicleData="seeCarData"></positioningTrajectory>

      <alarmLog v-if="drawerType && drawerTitle == '报警趋势'" :vehicleData="seeCarData"></alarmLog>
      <operatingRecord v-if="drawerType && drawerTitle == '营运里程'" :vehicleData="seeCarData"></operatingRecord>
      <trafficState v-if="drawerType && drawerTitle == '行驶状态'" :vehicleData="seeCarData"></trafficState>







      <Incumbency v-if="drawerType && drawerTitle == '驾乘人员'" :seeCarData="seeCarData"></Incumbency>
      <materialList v-if="drawerType && drawerTitle == '培训课件'" :materialList="materialList" ></materialList>
      <IncuTraiReco v-if="drawerType && drawerTitle == '学习记录'" :seeCarData="materialList"></IncuTraiReco>
    </Drawer>

  </div>
</template>
<script>

import vehiclePortraitDetails from "./vehiclePortraitDetails.vue";//车辆详情画像
import learning from "./learning.vue";//学习联动
import vehicleDetails from '../management/transportVehicle/vehicleDetails.vue'//车辆详情
import annualInspection from '../management/expire/annualInspection.vue'//车辆年检
import insurance from '../management/insurance/insurance.vue'//车辆保险
import maintenance from '../management/expire/maintenance.vue'//车辆维保
import service from '../management/expire/service.vue'//车辆营运
import beidouManagement from '../management/beidou/beidouManagement.vue'//车辆北斗
import alarmLog from "../management/operationMonitoring/alarmLog";//报警趋势
import operatingRecord from "../management/operationMonitoring/operatingRecord";//营运里程
import positioningTrajectory from '../management/operationMonitoring/positioningTrajectory.vue'//车辆轨迹
import Incumbency from "../educate/Employees/Incumbency";//企业人员
import IncuTraiReco from "../educate/TraiReco/IncuTraiReco";//培训记录
import materialList from '../educate/public/materialList.vue'//培训课件
import trafficState from "./trafficState";//行驶状态





export default {
  components: {
    vehiclePortraitDetails,//车辆详情画像
    learning,//学习联动
    vehicleDetails,//车辆详情
    annualInspection,//车辆年检
    insurance,//车辆保险
    maintenance,//车辆维保
    service,//车辆营运
    beidouManagement,//车辆北斗
    alarmLog,//报警趋势
    operatingRecord,//营运里程
    positioningTrajectory,//车辆轨迹
    Incumbency,//企业人员
    IncuTraiReco,//培训记录
    materialList,  // 课件详情
    trafficState,//行驶状态
  },

  data() {
    return {
      alarmToday:{},//报警次数
      capacityAnalysis:{},//车辆今日里程信息
      lastPosition:{},//最后定位
      drawerTitle:'',//弹框名称
      drawerType:false,//弹框状态

      seeCarData:{},
      alarmingTrendChar:null,//报警趋势
      operatingRangeChar: null,//营运里程
      trafficStateChar:null,//行驶状态
      timingData:null,//定时器


      materialList:[],//查看课件使用



      //轨迹
      map: null,//地图
      positioningData: [],//定位数据
      positionTrajectory: [],
      statePlay: false,//播放状态
      positioningindex: 0,//定位坐标
      pointCoordinates: null,//记录上一个点
      timingMethod: null,//定时
      wzTimer: 100,
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态
    var that = this;
    resize();
    function resize() {
      if(true){
        // if(window.innerHeight < 900){
        var s = window.innerHeight / 938;
        // document.body.style.zoom = s;//1 - s + 1;
        document.body.style.transformOrigin = '0 0';
        document.body.style.transform = 'scale(' + s + ',' + s + ')';
        document.body.style.width = window.innerWidth / s + 'px';
        document.body.style.height = window.innerHeight / s + 'px';
      }else{
        // document.body.style.zoom = 1;
        document.body.style.transformOrigin = '0 0';
        document.body.style.transform = 'inherit';
        document.body.style.width = '100%';
        document.body.style.height = '100%';
      }
    }

    window.addEventListener('resize', () => {
      resize();
      that.alarmingTrendChar.resize();//报警趋势
      that.trafficStateChar.resize();//行驶状态
      that.operatingRangeChar.resize();//营运里程
    }, false)
  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

    var that = this;
    //车辆修改详情
    that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/detailInfo", {vehicleUuid: that.$route.query.uuid}).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.seeCarData = res.data.data;//表单
        that.loadData();
      }
    }).catch(err => {
      console.log("失败", err)
    })
  },
  methods: {//执行的方法
    //加载数据源
    loadData(){
      var that = this;

      //车辆今日报警信息
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/alarmToday", {carPlateNo: that.seeCarData.carPlateNo,carPlateColor: that.seeCarData.carPlateColor}).then(res => {
        if (!!res) {
          that.alarmToday = !!res.data.data?res.data.data:{};
        }
      }).catch(err => {
        console.log("失败", err)
      })

      //车辆今日里程信息
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/capacityAnalysis", {carPlateNo: that.seeCarData.carPlateNo,carPlateColor: that.seeCarData.carPlateColor}).then(res => {
        if (res.data.data) {
          that.capacityAnalysis = !!res.data.data?res.data.data:{};
        }
      }).catch(err => {
        console.log("失败", err)
      })

      that.mapLoad();//地图加载

      that.mapRendering();//地图添加车辆位置


      //车辆今日里程信息
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/operationFifteenDays", {carPlateNo: that.seeCarData.carPlateNo,carPlateColor: that.seeCarData.carPlateColor}).then(res => {
        if (!!res) {
          var operationFifteenDays = [];
          res.data.data.forEach(function (k, i) {
            operationFifteenDays.push({name: k.date, value: parseInt(k.mileageDay)})
          })
          that.operatingRange(operationFifteenDays);
        }
      }).catch(err => {
        console.log("失败", err)
      })


      //车辆今日里程信息
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/alarmFifteenDays", {carPlateNo: that.seeCarData.carPlateNo,carPlateColor: that.seeCarData.carPlateColor}).then(res => {
        if (!!res) {
          var exceedAlarmCount = [],fatigueAlarmCount = [];
          res.data.data.forEach(function (k, i) {
            exceedAlarmCount.push({name: k.date, value: parseInt(k.exceedAlarmCount)})
            fatigueAlarmCount.push({name: k.date, value: parseInt(k.fatigueAlarmCount)})
          })

          //报警趋势
          var alarmingTrend = [
            {name: '疲劳驾驶',dataList: fatigueAlarmCount},
            {name: '超速报警',dataList: exceedAlarmCount},
          ];
          that.alarmingTrend(alarmingTrend)
        }
      }).catch(err => {
        console.log("失败", err)
      })



      that.vehiclesRealTime();//车辆实时数据
    },
    //营运里程
    operatingRange(data) {
      var that = this;
      var chartDom = document.getElementById('operatingRange');
      that.operatingRangeChar = that.echarts.init(chartDom);
      var option;
      var Xname = [];
      var dataList = [];
      data.forEach(function (k, i) {
        Xname.push(k.name)
        dataList.push(k.value)
      })
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        color: ['#fc765d', '#ffc500'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Xname
        },
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            data: dataList,
            type: 'line',
            showSymbol: false,
            smooth: true,
            //注销 就是折线
            // lineStyle: {
            //   width: 0
            // },
            // areaStyle: {},
          }
        ]
      };
      option && that.operatingRangeChar.setOption(option);
    },
    //车辆实时数据
    vehiclesRealTime(){
      var that = this;
      //最后定位
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/lastPosition", {carPlateNo: that.seeCarData.carPlateNo,carPlateColor: that.seeCarData.carPlateColor}).then(res => {
        if (!!res) {
          that.lastPosition = !!res.data.data?res.data.data:{};
          var num = !!that.lastPosition.vec1?that.lastPosition.vec1:0
          var data = num > 120 ? 120 : num;
          // console.log(num+"--------"+data)
          //行驶状态
          that.trafficState(data);

          clearInterval(that.timingData);
          that.timingData = setTimeout(function() {
            that.vehiclesRealTime()
          }, 10000);
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    //地图加载
    mapLoad() {
      let that = this;
      that.map = new BMap.Map("_wz_vehicleMonitoring_allmap");    // 创建Map实例
      that.map.centerAndZoom(new BMap.Point(105.058886, 36.028623), 5);  // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      that.map.addControl(new BMap.MapTypeControl({
        mapTypes: [
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]
      }));
      that.map.setCurrentCity("邢台");          // 设置地图显示的城市 此项是必须设置的
      that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // 左上角，添加比例尺
      let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
      that.map.addControl(top_left_control);
      //左上角，添加默认缩放平移控件
      let top_left_navigation = new BMap.NavigationControl();
      that.map.addControl(top_left_navigation);
    },
    //地图添加车辆轨迹
    mapRendering() {
      var that = this;

      var trackData = {
        carPlateNo:that.seeCarData.carPlateNo,
        carPlateColor:that.seeCarData.carPlateColor,
        beginOfDay:that.public.timeFormatting(new Date(that.public.timeFormatting(new Date(), "yyyy-MM-dd") + ' 00:00:00'), "yyyy-MM-dd hh:mm:ss"),
        endOfDay:that.public.timeFormatting(new Date(), "yyyy-MM-dd hh:mm:ss"),
      }

      that.positioningData = [];//定位数据
      that.positioningindex = 0;//定位坐标
      that.pointCoordinates = null;//记录上一个点
      that.timingMethod = null;//定时
      that.statePlay = false;//播放状态

      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/trajectory", trackData).then(res => {
        if (!!res) {
          that.positioningData = !!res.data.data?res.data.data:[];//轨迹数据全局化
          that.positionTrajectory = !!res.data.data?res.data.data:[];
          if (!!that.positionTrajectory && that.positionTrajectory.length > 0) {
            that.trajectoryLoad()
          } else {
            that.$Message.error('暂未获得到该车辆的轨迹');
          }
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    //清除地图
    removeOverlay() {
      this.map.clearOverlays();
    },
    //轨迹
    trajectoryLoad() {
      var that = this;
      let line = [];
      that.removeOverlay();//清除地图
      that.positionTrajectory.forEach(function (k, i) {
        let marker;
        if (i == 0) {//起点
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/start.png", new BMap.Size(28, 32));
          marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点
          // var geoc = new BMap.Geocoder();
          // geoc.getLocation(new BMap.Point(k.lonX, k.latY), function (rs) {
          //   that.addressTime.wzKssj = k.dateTime;
          //   that.addressTime.wzKsdd = rs.address;
          // })
        } else if ((i + 1) == that.positionTrajectory.length) {//终点
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/End.png", new BMap.Size(28, 32));
          marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点

          // var geoc = new BMap.Geocoder();
          // geoc.getLocation(new BMap.Point(k.lonX, k.latY), function (rs) {
          //   that.addressTime.wzJssj = k.dateTime;
          //   that.addressTime.wzJsdd = rs.address;
          // })

        }
        line.push(new BMap.Point(k.lonX, k.latY));//线连接点


      })
      let polyline = new BMap.Polyline(line, {
        strokeWeight: '6',//折线的宽度，以像素为单位
        strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
        strokeColor: "#18a45b" //折线颜色
      });   //
      that.map.addOverlay(polyline);          //增加折线
      that.map.setViewport(line);


      //开始播放
      if (that.positioningData.length == 0) {
        that.$Message.error('未查询到轨迹');
        return ;
      }
      if (that.positioningindex == that.positioningData.length) {
        that.positioningindex = 0
      }
      that.trajectoryPlayback()
    },
    //清除
    removeTiming() {
      clearInterval(this.timingMethod);
    },
    //轨迹播放
    trajectoryPlayback() {
      var that = this;
      that.statePlay = true;
      that.removeTiming();
      that.timingMethod = setInterval(function () {
        that.removeTiming();
        if (that.positioningindex < that.positioningData.length) {
          that.mapAdd();
          that.trajectoryPlayback();
        } else {
          that.$Message.success('播放完毕');
          that.statePlay = false;
          that.removeTiming();
        }
      }, that.wzTimer)
    },
    //地图加点
    mapAdd() {
      var that = this;
      if (!!that.pointCoordinates) {//删除上一个
        that.map.removeOverlay(that.pointCoordinates);
      }
      let myIcon = new BMap.Icon("../../static/img/vehicleImg/b4.png", new BMap.Size(22, 22));
      that.pointCoordinates = new BMap.Marker(new BMap.Point(that.positioningData[that.positioningindex].lonX, that.positioningData[that.positioningindex].latY), {icon: myIcon});  // 创建标注
      that.pointCoordinates.setRotation(that.positioningData[that.positioningindex].direction);
      that.pointCoordinates.setZIndex(999999);
      var data = that.positioningData[that.positioningindex];
      var html = '<div style=\'background:#FFFFFF;color:#000000;font-weight:normal;padding: 1px;border:solid  1px #ccc\'>' +
        '<div>行驶速度：' + data.vec1 + ' / ' + data.vec2 + '</div>' +
        '<div>总里程数：' + data.vec3 + '公里</div>' +
        '<div>行驶状态： ' + ((data.state >> 0 & 1) ? '启动' : '熄火') + ((data.state >> 1 & 1) ? ' - 定位' : ' - 未定位') + '</div>' +
        '<div>报警状态： ' + ((data.alarm >> 1 & 1) ? '超速报警' : "无超速") + ((data.alarm >> 2 & 1) ? '-疲劳报警' : " - 无疲劳") + '</div>' +
        '<div>定位时间：' + data.dateTime + '</div>' +
        '</div>';
      var BaiMakerLabel = new BMap.Label(html, {offset: new BMap.Size(22, -3)});
      BaiMakerLabel.setStyle({border: 'none', padding: '3px 5px', background: 'none'});
      that.pointCoordinates.setLabel(BaiMakerLabel);
      that.map.addOverlay(that.pointCoordinates);//增加点
      if (!that.CheckPoiInMapBound(new BMap.Point(that.positioningData[that.positioningindex].lonX, that.positioningData[that.positioningindex].latY))) {
        that.map.setCenter(new BMap.Point(that.positioningData[that.positioningindex].lonX, that.positioningData[that.positioningindex].latY));
      }
      that.positioningindex++;
    },
    //判断地图显示边界
    CheckPoiInMapBound(ThisLatlon) { //用于判断轨迹回放时经纬度是否超出地图可见区域，若超出则居中
      var that = this;
      var mapBounds = that.map.getBounds();
      if (mapBounds.containsPoint(ThisLatlon)) {
        return true;
      } else {
        return false;
      }
    },

    //报警趋势
    alarmingTrend(data) {
      var that = this;
      var chartDom = document.getElementById('alarmingTrend');
      that.alarmingTrendChar = that.echarts.init(chartDom);
      var option;
      var Xname = [];
      var dataList = [];
      data.forEach(function (k, i) {
        var list = {name: k.name, type: 'bar', stack: 'total', data: []}
        k.dataList.forEach(function (ko, io) {
          if (i == 0) {
            Xname.push(ko.name)
          }
          list.data.push(ko.value)
        })
        dataList.push(list)
      })
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        color: ['#fc765d', '#ffc500'],
        legend: {},
        grid: {
          top: '30px',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: Xname
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitNumber: 3,
        },
        series: dataList
      };
      option && that.alarmingTrendChar.setOption(option);

    },
    //行驶状态
    trafficState(data){
      var that = this;
      var chartDom = document.getElementById('_wz_speed');
      that.trafficStateChar = that.echarts.init(chartDom);
      var option,color = '';
      if (data < 80) {
        color = '#FDDD60';
      } else if (data <= 120) {
        color = '#58D9F9';
      } else if (data <= 160) {
        color = '#FF6E76';
      }

      option = {
        series: [
          {
            radius:'110%',
            center:['50%','70%'],
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 160,
            splitNumber: 8,
            itemStyle: {
              color: color,
              shadowColor: 'rgba(0,138,255,0)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            progress: {
              show: true,
              roundCap: true,
              width: 8,
              itemStyle: {
                color: color,
              },
            },
            pointer: {
              icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
              length: '75%',
              width: 10,
              offsetCenter: [0, '5%']
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 8,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            splitLine: {
              length: 1,
              lineStyle: {
                width: 3,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 20,
              color: '#999',
              fontSize: 12,

            },
            title: {
              show: false
            },
            detail: {
              lineHeight: 30,
              height: 30,
              borderRadius: 8,
              offsetCenter: [0, '15%'],
              valueAnimation: true,
              formatter: function (value) {
                return '{value|' + value.toFixed(0) + '}{unit|km/h}';
              },
              rich: {
                value: {
                  fontSize: 14,
                  fontWeight: 'bolder',
                  color: '#777'
                },
                unit: {
                  fontSize: 12,
                  color: '#999',
                  padding: [0, 0, 0, 10]
                }
              }
            },
            data: [
              {
                value: data
              }
            ]
          }
        ]
      };
      option && that.trafficStateChar.setOption(option);
    },
    //查看详情
    details(name,data){
      // console.log(name,data)
      if(!!data){
        this.materialList = data;
      }
      this.drawerTitle = name;//弹框名称
      this.drawerType = true;//弹框状态
    },

  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_vehiclePortrait {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  position: relative;

  ._wz_vehiclePortrait_top {
    padding: 10px 10px 0;
    height: 120px;

    .ivu-card-body {
      padding: 8px !important;
      height: 100%;
    }

    ._wz_vehiclePortrait_topList {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      ._wz_title {
        font-size: 50px;
        margin: 0 25px 0 0;
      }
    }
  }

  ._wz_vehiclePortrait_bottom {
    height: calc(100% - 120px);
    padding: 0 10px;
    position: relative;

    .ivu-card-body {
      padding: 8px !important;
      height: calc(100% - 51px);
    }
  }

  ._wz_vehiclePortrait_list {
    position: relative;
    padding: 10px 0px 0px 0px;
    height: calc(100% / 2);
  }

  ._wz_vehiclePortrait_details {
    color: #5cadff;
    cursor: pointer;
  }

  ._wz_vehiclePortrait_details:hover {
    color: #2d8cf0;
  }

  ._wz_vehiclePortraitDetailsc {
    .ivu-card-body {
      background: #454a5d;
      height: 100%;
      border-radius: 4px;
    }
  }

  ._wz_fileInformation {
    height: 50%;
    padding: 10px 10px 0 10px;

    ._wz_fileInformation_maintenance {
      color: #515a6e;
      border: 2px solid #f00;
      border-radius: 4px;
      padding: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  ._wz_speed_cont{
    color: #ada2a2;
    font-size: 12px;
    width:100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin: 6px 0;
    span{
      color: #2d8cf0;
      letter-spacing: 1px;
    }
  }

}

</style>
